import React, { Component, Fragment } from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import { login, logout } from './store/actions.js'
import styles from './style.less'
import withStyle from '../../withStyle'
import cx from 'classnames'
import { withRouter } from 'react-router'

class Sider extends Component {
	

	render() {
		// console.log(this.props.login)
		return (
			<div className={ cx(styles.sider, this.props.hideSelf ? styles.hideSelf : '') } >
				<div className={ cx(styles.headerIcon) } onClick={()=> {this.props.hideSider()}}>
					<i className="iconfont icon-close"></i>
				</div>
				<div className={styles.brandWrap}>
					<div className={styles.brand}>
						<a className={styles.avatar} href="">
							<img src="/assets/img/avatar.jpg" alt=""/>
						</a>
						<div className={styles.introduce}>
							<div className={styles.nickname}>Finnwu</div>
							<a className={styles.mail} href="">1608221989@qq.com</a>
						</div>
					</div>
				</div>
				<div className={styles.scrollWrap}>
					<ul className={styles.nav}>
						<li className={ cx(styles.navItem, styles.active) } onClick={() => {this.props.history.push('/')}}>
							<i className="iconfont icon-home" style={{marginRight: 15}}></i>主页
						</li>
						<li className={styles.navItem}  onClick={() => {this.props.history.push('/tag')}}><i className="iconfont icon-tag" style={{marginRight: 15}}></i>标签</li>
						<li className={styles.navItem}  onClick={() => {this.props.history.push('/about')}}><i className="iconfont icon-about" style={{marginRight: 15}}></i>关于</li>
						<li className={styles.navItem}><i className="iconfont icon-github" style={{marginRight: 15}}></i><a href="https://github.com/FinnWu" style={{color: "#5f5f8f"}}>GitHub</a></li>
						<li className={styles.navItem}><i className="iconfont icon-github" style={{marginRight: 15}}></i><a href="http://music.finnwu.cn/" style={{color: "#5f5f8f"}}>音乐项目</a></li>
					</ul>
				</div>
			</div>
		)
	}
}


const mapState = (state) => ({
	hideSelf: state.sider.hideSelf
})

const mapDispatch = (dispatch) => ({
	hideSider() {
		dispatch({
			type: 'changeStatus',
			value: true
		})
	}
})

export default withRouter(connect(mapState, mapDispatch)(withStyle(Sider, styles)))